<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { $t } from '@/locales';
import { useForm, useFormRules } from '@/hooks/common/form';
import { ApiSysLoginAttemptIPInput, ApiSysUserLockOut, ApiSysUserLoginRuleQuery } from '@/api-services';
import { NetoKit } from '@/typings/neto';
import { SysuserlockApi } from '@/api-services/apis/sysuserlock-api';
import { feature, getAPI } from '@/axios-utils';
import { queryDone } from '@/utils/api';
import { SysloginattemptipApi } from '@/api-services/apis/sysloginattemptip-api';

defineOptions({
  name: 'UserLockOperateModal'
});
interface Props {
  /** the type of operation */
  operateType: UI.TableOperateType;
  /** the edit row data */
  editId?: number | null;
}


const props = defineProps<Props>();

const visible = defineModel<boolean>('visible', {
  default: false
});

const { formRef, validate, restoreValidation} = useForm();



type Model = NetoKit.NullToUndefined<ApiSysLoginAttemptIPInput> &
{ ruleName?: string };
const model = ref(createDefaultModel());
function createDefaultModel(): Model {
  return {
    id: 0
  };
}

async function handleInitModel() {
  model.value = createDefaultModel();

  if (props.operateType === 'edit' && props.editId) {
    const [err, res] = await feature(getAPI(SysloginattemptipApi).get(props.editId));
    queryDone(err, () => {
      const data = res?.data.data;
      if (data) {
        Object.assign(model.value, data);
      }
    })
  }
}

// 定义组件的emits
interface Emits {
  (e: 'submitted'): void;
}
const emit = defineEmits<Emits>();

// 提交表单的方法
async function handleSubmit() {
  await validate(); // 验证表单

  // 提交请求
  const [err, res] = await feature(getAPI(SysloginattemptipApi).update(model.value));

  queryDone(err, async () => {
    if (res?.data.data) {
      window.$message?.success($t('common.updateSuccess'));
      closeModal();
      emit('submitted');
    }
  });
}

// 关闭抽屉的方法
function closeModal() {
  visible.value = false;
}

watch(visible, () => {
  if (visible.value) {
    handleInitModel();
    restoreValidation();
    // getRoleOptions();
  }
});


</script>

<template>

  <NModal v-model:open="visible" :title="$t('page.manage.loginAttempt.editTitle')" modal-height="" width="800px">

    <ElForm ref="formRef" :model="model" label-width="auto" >
      <ElRow :gutter="16" wrap>
        <ElCol :lg="12" :xs="24">
          <ElFormItem label="IP" name="ip">
            <ElInput v-model="model.ip"/>
          </ElFormItem>
        </ElCol>


        <ElCol :lg="12" :xs="24">
          <ElFormItem :label="$t('page.manage.loginAttempt.failedAttemptCount')" name="failedAttemptCount">
            <ElInput v-model="model.failedAttemptCount"/>
          </ElFormItem>
        </ElCol>


        <ElCol :lg="12" :xs="24">
          <ElFormItem :label="$t('page.manage.loginAttempt.ruleName')" name="ruleName">
            <ElInput v-model="model.ruleName"/>
          </ElFormItem>
        </ElCol>


        <ElCol :lg="12" :xs="24">
          <ElFormItem :label="$t('page.manage.loginAttempt.isManualUnlock')" name="isManualUnlock">
            <ElSwitch v-model="model.isManualUnlock"></ElSwitch>
          </ElFormItem>
        </ElCol>


        <ElCol :lg="12" :xs="24">
          <ElFormItem :label="$t('page.manage.loginAttempt.firstAttemptTime')" name="firstAttemptTime">
            <ElDatePicker type="datetime" format="YYYY-MM-DD HH:mm:ss" v-model="model.firstAttemptTime" ></ElDatePicker>
          </ElFormItem>
        </ElCol>

        <ElCol :lg="12" :xs="24">
          <ElFormItem :label="$t('page.manage.loginAttempt.lastAttemptTime')" name="lastAttemptTime">
            <ElDatePicker type="datetime" format="YYYY-MM-DD HH:mm:ss" v-model="model.lastAttemptTime"></ElDatePicker>
          </ElFormItem>
        </ElCol>


      </ElRow>
    </ElForm>

    <template #footer>
      <ElSpace :size="16">
        <!-- 取消按钮 -->
        <ElButton @click="closeModal">{{ $t('common.cancel') }}</ElButton>
        <!-- 确认按钮 -->
        <ElButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</ElButton>
      </ElSpace>
    </template>
  </NModal>

</template>

<style scoped></style>
